package com.hhit.yb.compose_demo.views

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.KeyboardArrowDown
import androidx.compose.material.icons.filled.KeyboardArrowUp
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.hhit.yb.compose_demo.models.SectionModel

@Composable
fun SectionCard(
    model: SectionModel,
    onClickAction: ((SectionModel) -> Unit)?,
    onExpandAction: () -> Unit,
    expanded: Boolean
) {
    Card(
        elevation = CardDefaults.cardElevation(defaultElevation = 1.dp),
        shape = RoundedCornerShape(2.dp)
    ) {
        Box(
            contentAlignment = Alignment.BottomStart
        ) {
            ContentComponent(onClickAction, model, onExpandAction, expanded)
            TagsComponent(model)
        }
    }
}

@Composable
fun TagsComponent(model: SectionModel) {
    Column(Modifier.padding(12.dp)) {
        LazyRow(
            horizontalArrangement = Arrangement.spacedBy(8.dp),
            content = {
                items(model.tags.size) { index ->
                    TutorialChip(text = model.tags[index], color = model.tagColor)
                }
            })
    }
}

@Composable
fun ContentComponent(
    onClickAction: ((SectionModel) -> Unit)?,
    model: SectionModel,
    onExpandAction: () -> Unit,
    expanded: Boolean
) {
    Column(
        Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .clickable(
                onClick = { onClickAction?.invoke(model) }
            )
            .padding(start = 12.dp, end = 12.dp, top = 0.dp, bottom = 8.dp)
    ) {

        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                text = model.title,
                fontWeight = FontWeight.Bold,
                fontSize = 18.sp
            )

            Spacer(modifier = Modifier.weight(1f))

            IconButton(onClick = { onExpandAction() }) {
                Icon(
                    imageVector = if (expanded) Icons.Default.KeyboardArrowUp
                    else Icons.Default.KeyboardArrowDown,
                    contentDescription = null
                )
            }
        }

        AnimatedVisibility(expanded) {
            Text(
                text = model.description,
                style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.alpha(0.8f)
            )
        }
        // Vertical spacing
        Spacer(Modifier.height(40.dp))
    }
}